<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>学员管理</title>
	<link href="<c:url value="/resources/css/blitzer/jquery-ui.css"/>" rel="stylesheet"  type="text/css" />  
	<script type="text/javascript" src="<c:url value="/resources/js/jquery.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js" />"></script>
	<script type="text/javascript">
		var url_add = '<c:url value="/add.action" />';
		var url_delete = '<c:url value="/delete.action" />';
		var url_get = '<c:url value="/get.action" />';
		var url_search = '<c:url value="/search.action" />';
		var url_update = '<c:url value="/update.action" />';
		var table;
		var html_tr;
		var current_opt_type;
		var current_student_id;
		
	    $(function() {
	    	
	    	table = $("#table");
	    	html_tr = $("#tr_data").outerHTML();
			$("#tr_data").remove();
			
			//加载学生列表
			loadTable();
	        
			//初始化表单对话框
	        $( "#dialog-form" ).dialog({
				autoOpen: false,
				height: 300,
				width: 350,
				modal: true,
				buttons: {
					"保存": function() {
						$( "#dialog-confirm" ).dialog( "open" );
					},
					"退出": function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					
				}
			});
			
			//初始化消息对话框
			$( "#dialog-success" ).dialog({
				autoOpen: false,
				show: "blind",
				hide: "explode"
			});
			
			$( "#dialog-fail" ).dialog({
				autoOpen: false,
				show: "blind",
				hide: "explode"
			});

			//初始化确认对话框
			$( "#dialog-confirm" ).dialog({
				autoOpen: false,
				resizable: false,
				height:140,
				modal: true,
				buttons: {
					"确认": function() {
						$( this ).dialog( "close" );
						
						if(current_opt_type=='add'){
							
							$( "#dialog-form").dialog( "close" );
							$.post(url_add, $("#form1").serialize(), function(feed) {
								if(feed=='success'){
									$( "#dialog-success" ).dialog( "open" );
									loadTable();
								}else{
									$( "#dialog-fail" ).dialog( "open" );
								}
							});
							
						}else if(current_opt_type=='update'){
							
							$( "#dialog-form").dialog( "close" );
							$.post(url_update,$("#form1").serialize(), function(feed) {
								if(feed=='success'){
									$( "#dialog-success" ).dialog( "open" );
									loadTable();
								}else{
									$( "#dialog-fail" ).dialog( "open" );
								}
							});
							
						}else if(current_opt_type=='delete'){
							
							$.post(url_delete,{"id":current_student_id},function(feed){
								if(feed=='success'){
									$( "#dialog-success" ).dialog( "open" );
									loadTable();
								}else{
									$( "#dialog-fail" ).dialog( "open" );
								}
							});
							
						}
						
					},
					"取消": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			
	        //显示创建学员界面
			$( "#add-student" ).click(function() {
				current_opt_type = "add";
				$("form").each( function(){//清空表单
					this.reset();
				});
				$( "#dialog-form" ).dialog("option","title","创建学员");
				$( "#dialog-form" ).dialog( "open" );
			});
			
			//展示修改学员界面
			$("[id$='_update']").live('click', function() {
				current_opt_type = "update";
				current_student_id = this.id.substring(0,this.id.indexOf('_update'));
				
				$("form").each( function(){//清空表单
					this.reset();
				});
				loadForm(current_student_id);
				$( "#dialog-form" ).dialog("option","title","修改学员");
				$( "#dialog-form" ).dialog( "open" );
			});
			
			//删除学员事件处理
			$("[id$='_delete']").live('click', function() {
				current_opt_type = "delete";
				current_student_id = this.id.substring(0,this.id.indexOf('_delete'));
				
				$( "#dialog-confirm" ).dialog( "open" );
			});

	    	//↓↓↓ 样式相关 ↓↓↓
	        $('ul#icons li').hover(
				function() { $(this).addClass('ui-state-hover'); }, 
				function() { $(this).removeClass('ui-state-hover'); }
			);
	    });
	    
	    
	    //加载学员列表数据
	    function loadTable(){
	    	$("#table tr:gt(0)").remove();
	    	$.ajax({url:url_search,type:"POST",cache:false,dataType:"json",success:function(feed){
				var data = eval(feed);
				display(data);
			},	error:function(feed){
				$( "#dialog-fail" ).dialog( "open" );
			}});    	
	    }
	    
	    //jquery 自定义函数
	    jQuery.fn.outerHTML = function(s) {   
		    return (s)? this.before(s).remove(): jQuery("<p>").append(this.eq(0).clone()).html();   
		 };
	    
		//修改学员时加载学员信息 
		function loadForm(id){
			$.ajax({url:url_get,type:"POST",cache:false,dataType:"json",data:"id="+id,success:function(feed){
				var data = eval(feed);
				for(var j in data){//迭代对象属性
					//alert(j+" "+data[j]);
					var item = $("input[name='student."+j+"']");
					
					if(item.length>0){
						item.each(
			    			function(){
			    				type = $(this).attr("type");
			    				switch(type)
						    	   {
						    	   case "text":
						    	   case "hidden":
						    		   $(this).val(data[j]);
						    	     break;
						    	     
						    	   case "radio":
						    		  if($(this).val()==data[j]){
						    			  $(this).attr("checked","checked");
						    		  }else{
						    			  $(this).attr("checked","");
						    		  }
						    	     break;
						    	     
					    	   }
			    			}	
				    	);
						
					}
					
				}
			},	error:function(feed){

			}});    	
		} 
		 
		//显示列表数据
	    function display(data){
	    	
	    	for(i=0;i<data.length;i++){
				this_html_tr = html_tr;
				var studentObj = data[i];
				id = data[i]['id'];
				this_html_tr = this_html_tr.replace(new RegExp("id_","gm"),id+"_");
				table.append(this_html_tr);
				
				$("#"+id+"_xh").html(i+1);
				
				for(var j in studentObj){//迭代对象属性
					if($("#"+id+"_"+j)!=undefined){
						if('sex'==j){
							if(studentObj[j]=='1')
								studentObj[j]='男';
							else
								studentObj[j]='女';
						}
						$("#"+id+"_"+j).html(studentObj[j]);
					}
				}
			}

	    }
	</script>
	
	<style type="text/css">
		body{ font: 82.5% "Trebuchet MS", sans-serif; margin: 50px;}
		.demoHeaders { margin-top: 2em; }
		#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
		#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
		ul#icons {margin: 0; padding: 0;}
		ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
		ul#icons span.ui-icon {float: left; margin: 0 4px;}
	</style>	
</head>
<body>
	<h1 style="background-color: red;color: white;padding-left: 5px">
	  		  COME ON ! ARSENAL ! 
	</h1>
	<ul id="icons" class="ui-widget ui-helper-clearfix">
		<li id="add-student" class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
	</ul>
	<table id="table" class="full" width="300px">
		<thead>
			<tr align="center">
				<td>序号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
		</thead>
		<tr id="tr_data" align="center">
			<td id="id_xh"></td>
			<td id="id_name"></td>
			<td id="id_sex"></td>
			<td>
				<ul id="icons" class="ui-widget ui-helper-clearfix">
					<li id="id_update" class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
					<li id="id_delete" class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
				</ul>
			</td>
		</tr>	
	</table>
			
	<div id="dialog-form" >
		<form id="form1" method="post" action="">
			<fieldset>
				<input type="hidden" value="" name="student.id">
				<label>姓名</label>
				<input type="text"  name="student.name" class="text ui-widget-content ui-corner-all" />
				<br/><br/>
				<label>性别</label>
				<input type="radio" name="student.sex" checked="checked" value="1" class="text ui-widget-content ui-corner-all" /> 男
				<input type="radio" name="student.sex" value="0" class="text ui-widget-content ui-corner-all" /> 女
			</fieldset>
		</form>
	</div>
	
	<div id="dialog-success" title="消息">
		<p style="color: red;font-weight: bold;">操作成功！</p>
	</div>
	
	<div id="dialog-fail" title="消息">
		<p style="font-weight: bold;">操作失败！</p>
	</div>
	
	<div id="dialog-confirm" title="确定吗？">
		<p>
			<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
			</span>
			确定执行该操作？
		</p>
	</div>
	
	<div style="position: absolute;right: 48%;bottom:1%">
		<img alt="afc" width="64px" height="64px" src="<c:url value="/resources/images/afc-logo.png"/>" />
	</div>
</body>
</html>